<template>
  <div class="nav_search">
    <input type="text" class="search_input no-drag" />
    <div class="search_icon no-drag">
      <searchIcon></searchIcon>
    </div>
  </div>
</template>

<script setup lang="ts">
import searchIcon from '@renderer/base-ui/lt-icon/search-icon.vue'
</script>

<style scoped lang="scss">
.nav_search {
  width: 300px;
  height: 70%;
  border-radius: 5px;
  display: flex;
  border: 1px solid #363636;

  .search_input {
    color: antiquewhite;
    outline: none;
    border: none;
    padding: 0 10px;
    flex: 1;
    background-color: transparent;
  }

  .search_icon {
    width: 50px;
    height: 100%;
    background-color: #262241;
    color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      background-color: #2c3f68;
    }
  }
}
</style>
